<template>
  <el-form :model="form" label-width="120px" class="cost-form">
    <!-- 诊断类 -->
    <el-row :gutter="20" class="mb-2">
      <el-col :span="6">
        <div class="category-title">2.诊断类：</div>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(5)病理诊断费">
          <el-input v-model.number="form.pathologyFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(6)实验室诊断费">
          <el-input v-model.number="form.labFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(7)影像学诊断费">
          <el-input v-model.number="form.imagingFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(8)临床诊断项目费">
          <el-input v-model.number="form.clinicalFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 治疗类 -->
    <el-row :gutter="20" class="mb-2">
      <el-col :span="6">
        <div class="category-title">3.治疗类：</div>
      </el-col>
      <el-col :span="8">
        <el-form-item label="(9)非手术治疗项目费">
          <el-input v-model.number="form.nonSurgicalFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="(临床物理治疗费)">
          <el-input v-model.number="form.physicalTherapyFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mb-2">
      <el-col :span="6">
        <el-form-item label="(10)手术治疗费">
          <el-input v-model.number="form.surgicalFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(麻醉费)">
          <el-input v-model.number="form.anesthesiaFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(手术费)">
          <el-input v-model.number="form.operationFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 康复类 -->
    <el-row :gutter="20" class="mb-2">
      <el-col :span="6">
        <div class="category-title">4.康复类：</div>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(11)康复费">
          <el-input v-model.number="form.rehabilitationFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 中医类 -->
    <el-row :gutter="20" class="mb-2">
      <el-col :span="6">
        <div class="category-title">5.中医类：</div>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(12)中医治疗费">
          <el-input v-model.number="form.tcmFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 西药类 -->
    <el-row :gutter="20" class="mb-2">
      <el-col :span="6">
        <div class="category-title">6.西药类：</div>
      </el-col>
      <el-col :span="8">
        <el-form-item label="(13)西药费">
          <el-input v-model.number="form.westernMedicineFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="(抗菌药物费用)">
          <el-input v-model.number="form.antibacterialFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 中药类 -->
    <el-row :gutter="20" class="mb-2">
      <el-col :span="6">
        <div class="category-title">7.中药类：</div>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(14)中成药费">
          <el-input v-model.number="form.chinesePatentMedicineFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(15)中草药费">
          <el-input v-model.number="form.chineseHerbalMedicineFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 血液和血液制品类 -->
    <el-row :gutter="20" class="mb-2">
      <el-col :span="6">
        <div class="category-title">8.血液和血液制品类：</div>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(16)血费">
          <el-input v-model.number="form.bloodFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(17)白蛋白类制品费">
          <el-input v-model.number="form.albuminFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(18)球蛋白类制品费">
          <el-input v-model.number="form.globulinFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mb-2">
      <el-col :span="6">
        <el-form-item label="(19)凝血因子类制品费">
          <el-input v-model.number="form.coagulationFactorFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="(20)细胞因子类制品费">
          <el-input v-model.number="form.cytokineFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 耗材类 -->
    <el-row :gutter="20" class="mb-2">
      <el-col :span="6">
        <div class="category-title">9.耗材类：</div>
      </el-col>
      <el-col :span="6">
        <el-form-item label="(21)检查用一次性医用材料费">
          <el-input v-model.number="form.inspectionMaterialFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="(22)治疗用一次性医用材料费">
          <el-input v-model.number="form.treatmentMaterialFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="(23)手术用一次性医用材料费">
          <el-input v-model.number="form.surgicalMaterialFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 其他类 -->
    <el-row :gutter="20" class="mb-2">
      <el-col :span="6">
        <div class="category-title">10.其他类：</div>
      </el-col>
      <el-col :span="4">
        <el-form-item label="(24)其他费">
          <el-input v-model.number="form.otherFee" placeholder="请输入金额" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 提交按钮 -->
    <el-row :gutter="20" class="mt-4">
      <el-col :span="24" style="text-align: right">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import { reactive } from 'vue'
import { ElForm, ElFormItem, ElInput, ElRow, ElCol, ElButton } from 'element-plus'

// 表单数据
const form = reactive({
  pathologyFee: 126.0,
  labFee: 8714.58,
  imagingFee: 2974.0,
  clinicalFee: 4916.0,
  nonSurgicalFee: 7513.0,
  physicalTherapyFee: 1440.0,
  surgicalFee: 6756.5,
  anesthesiaFee: 2556.5,
  operationFee: 4200.0,
  rehabilitationFee: 180.0,
  tcmFee: 1488.2,
  westernMedicineFee: 9036.36,
  antibacterialFee: 1574.08,
  chinesePatentMedicineFee: 3.57,
  chineseHerbalMedicineFee: 57.68,
  bloodFee: 5605.0,
  albuminFee: 0.0,
  globulinFee: 0.0,
  coagulationFactorFee: 0.0,
  cytokineFee: 0.0,
  inspectionMaterialFee: 417.84,
  treatmentMaterialFee: 1991.47,
  surgicalMaterialFee: 4709.2,
  otherFee: 4.66
})

// 提交表单逻辑
const handleSubmit = () => {
  console.log('提交的表单数据：', form)
  // 这里可根据实际需求，调用接口将form数据发送到后端，比如：
  // axios.post('/api/submitCost', form).then(res => {
  //   // 处理响应
  // }).catch(err => {
  //   // 处理错误
  // });
}
</script>

<style scoped>
.cost-form {
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.category-title {
  font-weight: bold;
  line-height: 32px;
  /* 与表单元素高度对齐，方便展示 */
}

.mb-2 {
  margin-bottom: 10px;
}

.mt-4 {
  margin-top: 20px;
}
</style>
